<script setup lang="ts">

import {ResourceGroupContentTreeVO} from "@/api/resource/group";

const props = defineProps<{
  list: ResourceGroupContentTreeVO[]
}>()

const selectValue = ref<number | undefined>(undefined)
watch(() => props.list, () => {
  selectValue.value = undefined
})

const emit = defineEmits(['change'])
const handleChange = (index: number) => {
  emit('change', props.list[index].id)
}

const handleChildChange = (id: number) => {
  emit('change', id)
}

const childRef = ref()
const handleClick = (index: number) => {
  if (index !== selectValue.value) return
  handleChange(index)
  childRef.value?.removeSelect()
}

const removeSelect = () => {
  selectValue.value = undefined
}
defineExpose({removeSelect})

</script>

<template>
  <div class="m-2">
    <el-radio-group v-model="selectValue" size="large" @change="handleChange">
      <el-radio-button
        v-for="(item, index) in list"
        :key="item.id"
        :label="item.name"
        :value="index"
        @click="handleClick(index)"
      />
    </el-radio-group>
  </div>

  <GroupDataRadioGroup
    ref="childRef"
    v-if="selectValue !== undefined && list[selectValue]?.groupChild.length > 0"
    :list="list[selectValue]?.groupChild || []"
    @change="handleChildChange"
  />

</template>

<style scoped lang="scss">

</style>
